<template>
  <van-form @submit="onSubmit" ref="addForm">
    <!-- 文章标题 -->
    <van-field
      v-model="title"
      name="title"
      label="文章标题"
      placeholder="请输入文章内容"
      :rules="[{ required: true, message: '' }]"
    />
    <!-- 文章分类 -->
    <van-field
      readonly
      clickable
      name="picker"
      :value="value"
      label="文章分类"
      placeholder="请选择文章分类"
      :rules="[{ required: true, message: '' }]"
      @click="showPicker = true"
    />
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        value-key="label"
        :columns="columns"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>

    <van-field
      readonly
      clickable
      name="picker"
      :value="value2"
      label="文章标签"
      placeholder="请选择文章标签"
      :rules="[{ required: true, message: '' }]"
      @click="showPicker2 = true"
    />
    <van-popup
      v-model="showPicker2"
      position="bottom"
      @confirm="onConfirm"
      close-icon="close"
      :style="{ height: '30%' }"
      closeable
    >
      <div class="tags-popup">
        <h3>请选择标签</h3>
        <van-checkbox-group v-model="checkboxGroup" direction="horizontal">
          <van-checkbox
            :name="item"
            shape="square"
            v-for="(item, index) in tagList"
            :key="index"
            >{{ item }}</van-checkbox
          >
        </van-checkbox-group>
      </div>
    </van-popup>
    <van-field name="uploader" label="文件上传">
      <template #input>
        <van-uploader v-model="uploader" :max-count="1" />
      </template>
    </van-field>
    <van-field
      name="content"
      v-model="message"
      rows="4"
      autosize
      label="文章正文"
      type="textarea"
      placeholder="请输入正文内容"
      :rules="[{ required: true, message: '' }]"
    />
    <br /><br />
    <van-row type="flex" justify="space-around">
      <van-button icon="plus" type="primary">发布</van-button>
      <van-button icon="send-gift-o" type="info" @click="save"
        >存草稿</van-button
      >
      <van-button
        icon="revoke"
        type="danger"
        native-type="button"
        @click="reset"
        >重置</van-button
      >
    </van-row>
  </van-form>
</template>

<script>
import request from '@/utils/request';
import { addArticle, editArticle } from '@/api/artice';
export default {
  props: {
    item: {
      type: Object,
      default: () => ({})
    },
    flag: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      prcCode: '',
      title: '',
      value: '',
      uploader: [],
      columns: ['分类1', '分类2', '分类3', '分类4', '分类5'],
      showPicker: false,
      showPicker2: false,
      checkboxGroup: [],
      message: '',
      tagList: [],
      status: 2,
      isEdit: false

    }
  },
  computed: {
    value2: {
      get() {
        return this.checkboxGroup.join(',')
      }
    }
  },
  methods: {
    onConfirm(value) {
      // 分类前端回显
      this.value = value.label
      // 后端需要的cateid
      this.prcCode = value.value
      this.showPicker = false
    },
    reset() {
      this.$refs.addForm.resetValidation()
      this.title = ''
      this.value = ''
      this.checkboxGroup = []
      this.uploader = []
      this.message = ''
    },
    save() {
      this.state = 1
    },
    async onSubmit(value) {
      const formData = new FormData();
      let pic = ''
      if (value.uploader[0].file) {
        formData.append('file', value.uploader[0].file);
        const res1 = await request.post('http://124.223.14.236:8060/common/upload?type=images', formData, {
          headers: {
            'Content-Type': 'multipart/form-data',
          }
        })
        // console.log(res1.data.savePath)
        pic = res1.data.savePath
      }
      const obj = {
        author: '',
        cateid: this.prcCode,
        content: this.message,
        title: this.title,
        tags: this.value2,
        pic: pic || '',
        status: this.status,
        id: this.item.id || 0
      }
      let res2
      if (this.isEdit) {
        res2 = await editArticle(obj)
        if (res2.errno === 0) {
          this.$toast.success('编辑文章成功')
          this.$emit('closePopup')
        }
      }
      else {
        res2 = await addArticle(obj)
        if (res2.errno === 0) {
          this.$toast.success('操作成功！')
        }
      }
    },
    editEcho() {
      // 编辑时数据回显
      if (this.item.cateid) {
        console.log(111)
        this.isEdit = true
        this.title = this.item.title
        this.message = this.item.content
        this.prcCode = this.item.cateid
        this.checkboxGroup = this.item.tags.split(',')
        this.value = this.$store.state.allCate.find(ele => ele.id === this.item.cateid).catename
        this.uploader = []
        this.uploader.push({ url: this.$getUrl(this.item.pic) })
      }
    }
  },
  async created() {
    await this.$store.dispatch('cateAction')
    this.columns = this.$store.state.allCate.map(ele => ({ label: ele.catename, value: ele.id }))
    this.tagList = this.$store.state.allTag.map(ele => ele.tagname)
  }
}
</script>

<style scoped lang="less">
.tags-popup {
  padding: 0 20px;
  h3 {
    font-size: 30px;
    font-weight: normal;
    line-height: 100px;
    border-bottom: 1px solid #eee;
    margin-bottom: 30px;
  }
}
</style>